<!-- 公司名片 公司服务 -->
<template>
  <div>
    <div class="server_btn">
      <Button type="primary" style="margin-left: 8px" @click="addServer()"
        v-if="isEdit">添加服务信息</Button>
      <Button type="primary" style="margin-left: 8px" @click="setSort()"
        v-if="isEdit">设置排序规则</Button>
    </div>
    <dynamic-header ref="dynamicHeader" @fieldCancel="fieldCancel" @headUpdate="headUpdate"
      :sourcedata="sourcedata" :targetdata="targetdata" :infoText='infoText' dataAll='true'>
    </dynamic-header>
    <dt-grid ref="table" page :onFetch='onFetch' />
    <edit-server ref="editServer" @success='onSuccess' />
  </div>
</template>

<script>
  import companyApi from '@/biz/backStage/companyCard'
  import dynamicHeader from '@/components/dynamicHeader.vue'
  import serverColumns from '../opt/serverColumns'
  import editServer from './editServer'
  export default {
    components: {
      dynamicHeader,
      editServer
    },
    data() {
      return {
        sourcedata: [],
        targetdata: [],
        infoText: {
          text1: '设置排序规则',
          text2: '未在名片中显示',
          text3: '已在名片中显示'
        },
        isEdit: this.$route.query.isEdit == 'view' ? false : true,
      };
    },
    methods: {
      addServer() {
        let data = {
          title: '添加服务信息',
          flag: 'add'
        }
        this.$refs.editServer.show(data)
      },
      setSort() {
        let params = {
          companyId: this.$route.query.companyId
        }
        companyApi.companyServiceSortList(params).then(res => {
          console.log(res, 'res')
          this.targetdata = res.displayCompanyServiceList
          this.sourcedata = res.unDisplayCompanyServiceList
        })
        this.$refs.dynamicHeader.show()
      },

      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },
      headUpdate(val) {
        console.log(val, '*****')
        let displayCompanyServiceIdList = [],
          unDisplayCompanyServiceIdList = []

        val.sourceList && val.sourceList.forEach((item, index) => {
          unDisplayCompanyServiceIdList.push(item.dbkey)
        })
        val.targetList && val.targetList.forEach((item, index) => {
          displayCompanyServiceIdList.push(item.dbkey)
        })
        console.log(displayCompanyServiceIdList, unDisplayCompanyServiceIdList, '^^^^^')
        let params = {
          companyId: this.$route.query.companyId,
          displayCompanyServiceIdList,
          unDisplayCompanyServiceIdList
        }
        companyApi.updateDisplayAndSort(params).then((res) => {
          this.$refs.dynamicHeader.hide()
          this.$Message.success('设置成功')
          this.onSuccess()
        })
      },
      onFetch(data) {
        let params = {
          companyId: this.$route.query.companyId,
          ...data
        }
        return companyApi.companyServicePage(params).then(res => {
          return res
        })
      },
      checkFun(data) {
        let obj = {
          title: '查看服务信息',
          isView: true,
          flag: 'view',
          ...data
        }
        this.$refs.editServer.show(obj)
      },
      editFun(data) {
        let obj = {
          title: '编辑服务信息',
          flag: 'edit',
          ...data
        }
        this.$refs.editServer.show(obj)
      },
      delFun(data) {
        this.$Modal.confirm({
          title: '确认要删除该“公司服务”信息？',
          content: '删除后无法恢复，如不想对外展示该信息，可通过设置“排序及显示”规则功能进行调整',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            let params = {
              id: data.id,
            }
            companyApi.companyServiceDel(params).then(res => {
              this.$Message.success('删除成功')
              this.onSuccess()
            })
          },
        })
      },
      onSuccess() {
        this.$refs.table.fetch()
      },
    },
    mounted() {
      this.$refs.table.init(this, new serverColumns(this))
      this.$refs.table.fetch()
    },
  }
</script>
<style lang='scss' scoped>
  .server_btn {
    margin-bottom: 15px;
  }
</style>